<template>
  <q-dialog v-model="show" persistent>
    <q-card v-drag class="dialog-content" style="min-width: 1000px; max-height: 550px">
      <q-card-section class="dialog-title bg-primary" >
        <div class="text-center text-white dialog-title">
          <span class="font-size-16">详情 [ {{details.id}} ] </span>
          <q-btn
            style="font-size: 18px;color: white"
            flat round dense
            class="iconfont icontubiao-67 white close-btn dialog"
            @click="$emit('close')"
          />
        </div>
      </q-card-section>
      <q-card-section class="row form-inline" style="padding: 12px 20px 8px">
        <div class="col-4"><text-label :label="'产品名称'" :value="details.productName+'('+details.productNumber+')'"/></div>
        <div class="col-4"><text-label :label="'订单编号'" :value="details.orderNumber"/></div>
        <div class="col-4"><text-label :label="'批次编号'" :value="details.orderBatch"/></div>
        <div class="col-4"><text-label :label="'加工工序'" :value="process"/></div>
        <div class="col-4"><text-label :label="'加工设备'" :value="details.deviceName+'('+details.deviceNumber+')'"/></div>
        <div class="col-4"><text-label :label="'质检人员'" :value="details.personalName"/></div>
        <div class="col-4"><text-label :label="'检验数量'" :value="details.qualityControlCount"/></div>
        <div class="col-4">
          <div class="q-field row no-wrap items-start q-input q-field--outlined q-field--float q-field--dense items-center" style="padding-bottom: 4px">
            <div class="q-field__before q-field__marginal row no-wrap items-center">
              <label class="text-right name"  style="font-size: 14px !important;">
                <span>不良数量:</span>
              </label>
            </div>
            <div style="font-size: 14px;max-width: calc(100% - 86px)">
              <q-btn flat color="primary" :label="details.defectiveCount" :disable="details.defectiveCount == 0" style="font-size: 14px;" class="table-flat-btn" @click="showDetail('defective', details.defectiveCount)"/>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="q-field row no-wrap items-start q-input q-field--outlined q-field--float q-field--dense items-center" style="padding-bottom: 4px">
            <div class="q-field__before q-field__marginal row no-wrap items-center">
              <label class="text-right name" style="font-size: 14px !important;">
                <span>让步数量:</span>
              </label>
            </div>
            <div style="font-size: 14px;max-width: calc(100% - 86px)">
              <q-btn flat color="primary" :label="details.compromiseCount" class="table-flat-btn" style="font-size: 14px;" :disable="details.compromiseCount == 0" @click="showDetail('compromise', details.compromiseCount)"/>
            </div>
          </div>
        </div>
      </q-card-section>
      <q-card style="margin: 0 10px;box-shadow:none">
        <q-card-section class="dialog-title bg-primary" >
          <div class="text-center text-white dialog-title" style="padding-left: 0;text-align: left;">
            <span class="font-size-16">不良录入记录</span>
          </div>
        </q-card-section>
        <q-scroll-area class="box-content bg-white bordered" :thumb-style="thumbStyle" style="height: 300px;padding: 0 20px">
          <div>
            <div v-for="(item,index) in qualityLogs" :key="index" class="log-item">
              <span>{{item.newDate}}</span>
              <span>{{item.name}}</span>
              <span>{{item.message}}</span>
              <span>{{item.label}}</span>
              <span>{{item.count}}</span>
            </div>
          </div>

        </q-scroll-area>
      </q-card>
    </q-card>
    <defective-list
      :show="detailDialog.show"
      :type="detailDialog.type"
      :count="detailDialog.count"
      :id="details.id"
      @close="detailDialog.show = false"
    />
  </q-dialog>
</template>

<script>
import textLabel from './text-label'
import defectiveList from './defective-list'
import { getQualityLogs } from '../../../boot/job/quality-order'
import { date } from 'quasar'
export default {
  name: 'quality-history',
  components: {
    textLabel,
    defectiveList
  },
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    },
    selItem: {
      required: true
    }
  },
  data () {
    return {
      details: {}, // 详情信息
      qualityLogs: [], // 录入记录
      process: '', // 工序
      // 详细弹出款
      detailDialog: {
        show: false,
        type: '',
        count: 0
      },
      thumbStyle: this.CommonConfig.thumbStyle // 滚动条样式
    }
  },
  methods: {
    // 获取质检记录
    getQualityLogs () {
      const params = {
        id: this.details.id
      }
      getQualityLogs(params).then(res => {
        res.data.forEach(i => {
          i.newDate = date.formatDate(new Date(i.time), 'YYYY-MM-DD HH:mm:ss')
        })
        this.qualityLogs = res.data
        // console.log(res)
      })
    },
    // 显示录入详细
    showDetail (type, count) {
      this.detailDialog.show = true
      this.detailDialog.type = type
      this.detailDialog.count = count
    }
  },
  watch: {
    selItem (val) {
      this.details = val
      this.process = `${val.sort}-${val.processName}`
      this.getQualityLogs()
    }
  }
}
</script>

<style scoped lang="stylus">
  .table-flat-btn{
    min-width auto
    font-weight initial
  }
  .log-item{
    font-size 14px
    border-bottom 1px solid #D3D3D3
    line-height 40px
    span {
      margin-right 30px
    }
  }&:last-child{
     border none
     }
  .bordered,.bordered:last-child {
    border-bottom  1px
    border-top 0
    border 1px solid #D3D3D3
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }
</style>
